﻿@page "/components/progress"

<Pager Title="Progress" Description="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."
 Indicates="@(new[]{"Example","Lables","Height","Color","Multiple bars","Striped","Animated stripes"})">
 	<Demo Title="Example">
		<Description>

		</Description>
		<Run>
			
			<Progress>
				<ProgressBar style="width:0%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar style="width:20%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar style="width:50%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar style="width:70%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar style="width:100%"/>
			</Progress>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Progress>
	<ProgressBar style=""width:0%""/>
</Progress>
<Progress>
	<ProgressBar style=""width:20%""/>
</Progress>
<Progress>
	<ProgressBar style=""width:50%""/>
</Progress>
<Progress>
	<ProgressBar style=""width:70%""/>
</Progress>
<Progress>
	<ProgressBar style=""width:100%""/>
</Progress>
```
			")
		</Code>
	</Demo>
	<Demo Title="Labels">
		<Description>
			Add labels to your progress bars by placing text within the <code>ProgressBar</code> .
		</Description>
		<Run>
			<Progress>
				<ProgressBar style="width:50%">50%</ProgressBar>
			</Progress>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Progress>
	<ProgressBar style=""width:50%"">50%</ProgressBar>
</Progress>
```
			")
		</Code>
	</Demo>
	<Demo Title="Height">
		<Description>
			We only set a height value on the <code>Progress</code> component, 
			so if you change that value the inner <code>ProgressBar</code> will automatically resize accordingly.
		</Description>
		<Run>
			<Progress style="height:2px">
				<ProgressBar style="width:70%"/>
			</Progress>
			<br />
			<Progress style="height:5rem">
				<ProgressBar style="width:20%">20%</ProgressBar>
			</Progress>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Progress style=""height:2px"">
	<ProgressBar style=""width:70%""/>
</Progress>
			
<Progress style=""height:5rem"">
	<ProgressBar style=""width:20%"">20%</ProgressBar>
</Progress>
```
			")
		</Code>
	</Demo>
		<Demo Title="Color">
		<Description>
			Set <code>Color</code> to change the appearance of individual progress bars.
		</Description>
		<Run>
			<Progress>
				<ProgressBar Color="Color.Secondary" style="width:50%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar Color="Color.Warning" style="width:40%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar Color="Color.Danger" style="width:90%"/>
			</Progress>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Progress>
	<ProgressBar Color=""Color.Secondary"" style=""width:50%""/>
</Progress>

<Progress>
	<ProgressBar Color=""Color.Warning"" style=""width:40%""/>
</Progress>

<Progress>
	<ProgressBar Color=""Color.Danger"" style=""width:90%""/>
</Progress>
```
			")
		</Code>
	</Demo>
		<Demo Title="Multiple bars">
		<Description>
			Include multiple progress bars in a progress component if you need.
		</Description>
		<Run>
			<Progress>
				<ProgressBar Color="Color.Warning" style="width:30%"/>
				<ProgressBar Color="Color.Dark" style="width:25%"/>
				<ProgressBar Color="Color.Success" style="width:45%"/>
			</Progress>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Progress>
	<ProgressBar Color=""Color.Warning"" style=""width:30%""/>
	<ProgressBar Color=""Color.Dark"" style=""width:25%""/>
	<ProgressBar Color=""Color.Success"" style=""width:45%""/>
</Progress>
```
			")
		</Code>
	</Demo>
	<Demo Title="Striped">
		<Description>
			Set <code>Striped</code> to any <code>ProgressBar</code> to apply a stripe via CSS gradient over the progress bar’s background color.
		</Description>
		<Run>
			<Progress>
				<ProgressBar Striped style="width:20%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar Color="Color.Dark" Striped style="width:50%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar Color="Color.Warning" Striped style="width:70%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar Color="Color.Danger" Striped style="width:100%"/>
			</Progress>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Progress>
	<ProgressBar Striped style=""width:20%""/>
</Progress>

<Progress>
	<ProgressBar Color=""Color.Dark"" Striped style=""width:50%""/>
</Progress>

<Progress>
	<ProgressBar Color=""Color.Warning"" Striped style=""width:70%""/>
</Progress>

<Progress>
	<ProgressBar Color=""Color.Danger"" Striped style=""width:100%""/>
</Progress>
```
			")
		</Code>
	</Demo>
		<Demo Title="Animated stripes">
		<Description>
			The striped gradient can also be animated. Set <code>Animated</code> to animate the stripes right to left via CSS3 animations.
		</Description>
		<Run>
			<Progress>
				<ProgressBar Striped Animated style="width:20%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar Color="Color.Dark" Striped Animated style="width:50%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar Color="Color.Warning" Striped Animated style="width:70%"/>
			</Progress>
			<br />
			<Progress>
				<ProgressBar Color="Color.Danger" Striped Animated style="width:100%"/>
			</Progress>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Progress>
	<ProgressBar Striped Animated style=""width:20%""/>
</Progress>

<Progress>
	<ProgressBar Color=""Color.Dark"" Striped Animated style=""width:50%""/>
</Progress>

<Progress>
	<ProgressBar Color=""Color.Warning"" Striped Animated style=""width:70%""/>
</Progress>

<Progress>
	<ProgressBar Color=""Color.Danger"" Striped Animated style=""width:100%""/>
</Progress>
```
			")
		</Code>
	</Demo>
</Pager>